<!DOCTYPE html>
<html lang="en">
  <style>
    * {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    h1 {
      text-align: center;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin-bottom: 0px;
      margin-top: 0px;
      padding-right: 20px;
    }
    .container{
      text-align: center;
    }
    .subtitle {
      margin-top: 12px;
    }
    #btn_container {
      padding-top: 20px;
      padding-bottom: 50px;
    }
    .initialize_btn {
      border-radius: 2px;
      background-color: rgb(0, 168, 36);
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 22px;
      padding: 8px;
      width: 220px;
      transition: all 0.4s;
      cursor: pointer;
      margin: 25px;
    }
    .initialize_btn span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.4s;
    }
    .initialize_btn span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    .initialize_btn:hover {
      background-color: rgb(2, 95, 22);
      color: #FFFFFF;
    }
    .initialize_btn:hover span {
      padding-right: 25px;
    }
    .initialize_btn:hover span:after {
      opacity: 1;
      right: 0;
    }
    #btn_subtext {
      margin-top: 20px;
    }
    #gif-ctn {
      text-align: center;
    }
    #usage-gif {
      width: 100%;
      max-width: 1200px;
      vertical-align: middle;
    }
    #header-block {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .inline-header {
      display: inline-block;
    }
  </style>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dendron</title>
  </head>
  <body>
    <div class="container">
      <div id="header-block">
        <img class="inline-header" width="100" src="https://org-dendron-public-assets.s3.amazonaws.com/images/tutorial-logo.png">
        <div class="inline-header">
          <h1>Welcome to Dendron</h1>
        </div>
      </div>
    <h2>
      Knowledge Management. Redefined.
    </h2>
    <p class="subtitle">Note, organize, and reference any amount of information.</p>
  </div>
    <br>
    <div id="btn_container" class="container">
      <a class="initialize_btn" id="btn_id" target="_blank" rel="nofollow"><span>Get Started</a>
    </div>
    
    <div id="gif-ctn">
      <img id="usage-gif" src="https://org-dendron-public-assets.s3.amazonaws.com/images/tutorial-welcome-usage-demo.gif">
    </div>

    <script>
      var btn = document.getElementById("btn_id");
      const vscode = acquireVsCodeApi();
      vscode.postMessage({
          command: "loaded",
        });

      btn.addEventListener("click", function () {
        vscode.postMessage({
          command: "initializeWorkspace",
        });
      });
    </script>
  </body>
</html>
